<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>原生 JS 连连看</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="game-wrapper">
      <header class="game-header">
        <h1>原生 JS 连连看</h1>
        <div class="game-panel">
          <div class="stats">
            <span>剩余时间：<strong id="timer">--:--</strong></span>
            <span>得分：<strong id="score">0</strong></span>
            <span>步数：<strong id="steps">0</strong></span>
          </div>
          <div class="actions">
            <button id="btn-restart">重新开始</button>
            <button id="btn-shuffle">洗牌</button>
            <button id="btn-hint">提示</button>
          </div>
        </div>
      </header>
      <main class="game-main">
        <div id="board" class="board" role="grid" aria-label="连连看棋盘"></div>
        <canvas id="path-canvas" class="path-canvas" aria-hidden="true"></canvas>
      </main>
    </div>

    <template id="tile-template">
      <button class="tile" type="button" aria-pressed="false"></button>
    </template>

    <script src="./main.js"></script>
  </body>
</html>

